<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>+</button>
  <script>
    /*
    箭头函数的this：
        箭头函数中的this与普通函数完全不同，也不受调用方式的影响，箭头函数并不存在this
        箭头函数会默认帮我们绑定外层this的值，所以箭头函数中this的值和外层的this是一样的
        箭头函数中的this引用的就是最近作用域中的this
        向外层作用域中，一层一层查找this，直到有this的定义 
    注意：
      事件的回调函数使用箭头函数时this指向window，因此不推荐使用
      原型对象上的方法也不推荐使用箭头函数

     */
    
     document.querySelector("button").addEventListener("click",()=>{
      console.log(this) //window
     })

     const person = {
      name:"陶品奇",
      age:22,
      writeCode:()=> {
        console.log(this) //window
      }
    }
    person.writeCode()
  </script>
</body>
</html>